<template>
  <div class="donationRecord">
    <div class="header">
      <!-- 时间 -->
      <div @click="dateClick" style="width: 42%; position: relative">
        <u--input
          border="surround"
          v-model="dateInputValue"
          disabled
        ></u--input>
        <!-- 三角 -->
        <div style="position: absolute; right: 10px; top: 7px">
          <u-icon v-if="!dateShow" name="arrow-down-fill" size="12"></u-icon>
          <u-icon v-else name="arrow-up-fill" size="12"></u-icon>
        </div>
      </div>
      <!-- 类型 -->
      <div @click="typeClick" style="width: 45%; position: relative">
        <u--input
          border="surround"
          v-model="typeInputValue"
          disabled
        ></u--input>
        <!-- 三角 -->
        <div style="position: absolute; right: 10px; top: 7px">
          <u-icon v-if="!typeShow" name="arrow-down-fill" size="12"></u-icon>
          <u-icon v-else name="arrow-up-fill" size="12"></u-icon>
        </div>
      </div>
    </div>
    <!-- 时间选择器 -->
    <u-datetime-picker
      :closeOnClickOverlay="true"
      :show="dateShow"
      v-model="dateValue"
      mode="year-month"
      @close="dateClose"
      @cancel="dateCancel"
      @confirm="dateConfirm"
    >
    </u-datetime-picker>
    <!-- 类型选择器 -->
    <u-picker
      :show="typeShow"
      :columns="typeColumns"
      :closeOnClickOverlay="true"
      @close="typeClose"
      @cancel="typeCancel"
      @confirm="typeConfirm"
    ></u-picker>
    <!-- 内容 -->
    <div class="content">
      <!-- 列表 -->
      <div class="table">
        <!-- 列表头部 -->
        <div class="table_header">
          <div style="color: #696969">姓名</div>
          <div style="color: #6a6a6a">缴纳状态</div>
        </div>
        <!-- 列表内容 -->
        <div class="table_content">
          <!-- <u-row>
						<u-col span="4"> 
						<div class="name">
							<u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
							<div style="margin-left: 10px;">刘华</div>
						</div>
						</u-col>
						<u-col span="4">10.00元</u-col>
						<u-col span="4">已缴纳</u-col>
					</u-row> -->
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
          <div class="item">
            <div class="name">
              <u-avatar
                src="https://cdn.uviewui.com/uview/album/1.jpg"
              ></u-avatar>
              <div style="margin-left: 10px">刘华</div>
            </div>
            <div style="color: #eeadad">10.00元</div>
            <div style="color: #c5c5c5">已缴纳</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateShow: false,
      dateValue: "",
      typeShow: false,
      typeColumns: [["疫情防控捐款", "防控捐款"]],
      dateInputValue: "2022年05月",
      typeInputValue: "疫情防控捐款",
      value: "1325347200000",
    };
  },
  methods: {
    dateClick() {
      this.dateShow = true;
    },
    typeClick() {
      this.typeShow = true;
    },
    dateConfirm(value) {
      // console.log(value)

      this.dateInputValue = this.timestampToTime(value.value);
      // this.dateInputValue = value.value
      this.dateShow = false;
    },
    dateCancel() {
      this.dateShow = false;
    },
    typeConfirm(Array) {
      console.log(Array.value[0]);
      this.typeInputValue = Array.value[0];
      this.typeShow = false;
    },
    typeCancel() {
      this.typeShow = false;
    },
    dateClose() {
      this.dateShow = false;
    },

    typeClose() {
      this.typeShow = false;
    },

    //将时间戳转换成日期格式
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "年";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      return Y + M;
      // console.log(Y+M)
    },
  },
  onShow() {
    this.dateInputValue = this.timestampToTime(new Date());
  },
};
</script>

<style lang="less">
.donationRecord {
  padding: 15px;

  .header {
    display: flex;
    justify-content: space-between;
    // padding: 10px 0;
    padding-bottom: 15px;
  }

  .content {
    background-color: #fff;
    width: 100%;
    // height: 500px;

    .table {
      // padding: 5px;
      .table_header {
        display: flex;
        justify-content: space-between;
        background-color: #efefef;
        padding: 8px 30px;
        padding-left: 50px;
      }

      .table_content {
        padding: 0 15px;
        height: 85vh;
        overflow: auto;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #ddd;
          padding: 6px 0;
          padding-right: 20px;

          .name {
            display: flex;
            align-items: center;
          }
        }

        .item:last-of-type {
          border-bottom: none;
        }
      }
    }
  }
}

.donationRecord /deep/ .u-input {
  background-color: #fff !important;
  border-radius: 20px !important;
  padding: 0 9px !important;

  // width: 50%;
}
</style>
